import React, { RefObject, useEffect, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Radio,
    ImageUploader,
    NavBar,
    Modal
} from 'antd-mobile'
import { QuestionCircleOutline } from 'antd-mobile-icons'
import { ImageUploadItem } from 'antd-mobile/es/components/image-uploader'
import { getInfo, upload, changeUserInfo } from "../../service/mineService"
import { useNavigate, useLocation } from "react-router-dom"
import { alert } from 'antd-mobile/es/components/dialog/alert'
export default function Login() {
    let nagNavigate = useNavigate();

    const [infoList, setinfoList] = useState<any>({})
    const img3 = useLocation()
    useEffect(() => {
        getUserInfo()
    }, [])

    let getUserInfo = async () => {
        let res = await getInfo()
        console.log(res);
        setinfoList(res.data.user)
    }



    //提交修改
    const onFinish = async (values: any) => {
        // console.log(values);
        if (file) {
            let formData = new FormData()
            formData.append('file', file)
            let res = await upload(formData)
            // console.log(res);
            let avatar = "/prod-api" + res.data.fileName
            let res2 = await changeUserInfo({
                nickName: values.nickName,
                avatar,
                email: values.email ? values.email : infoList.email,
                idCard: values.idCard ? values.idCard : infoList.idCard,
                phonenumber: values.phonenumber ? values.phonenumber : infoList.phonenumber,
                sex: values.sex ? values.sex : infoList.sex
            })
            if (res2.data.code == 200) {
                Modal.alert({
                    content: res2.data.msg,
                    onConfirm: () => {
                        nagNavigate('/mine')
                    },
                })
            } else {
                Modal.alert({
                    content: res2.data.msg,
                })
            }
        } else {
            let res2 = await changeUserInfo({
                nickName: values.nickName,
                email: values.email ? values.email : infoList.email,
                idCard: values.idCard ? values.idCard : infoList.idCard,
                phonenumber: values.phonenumber ? values.phonenumber : infoList.phonenumber,
                sex: values.sex ? values.sex : infoList.sex
            })
            if (res2.data.code == 200) {
                Modal.alert({
                    content: res2.data.msg,
                    onConfirm: () => {
                        nagNavigate('/mine')
                    },
                })
            } else {
                Modal.alert({
                    content: res2.data.msg,
                })
            }
        }



    }

    //头像
    const [file, setfile] = useState<any>()
    const [fileList, setFileList] = useState<ImageUploadItem[]>([
        {
            url: img3.state
        },
    ])
    function mockUpload(file: File) {
        setfile(file)
        return {
            url: URL.createObjectURL(file),
        } as any
    }
    let changeFile = (file: any) => {
        let newList = [...file]
        newList.splice(0, 1)
        setFileList(newList)
    }

    //navbar
    const back = () => {
        nagNavigate('/mine')

    }
    const right = (
        <div style={{ fontSize: 24 }}>
            <QuestionCircleOutline fontSize={22} />
        </div>
    )

    return (
        <div className='changeUserDiv'>
            <NavBar right={right} onBack={back}>
                <div className='changeUserDiv-title'>修改个人信息</div>
            </NavBar>
            <Form
                layout='horizontal'
                name='form'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >

                <Form.Item name='avatar' label='头像' extra={<ImageUploader
                    value={fileList}
                    onChange={changeFile}
                    upload={mockUpload}
                    maxCount={2}
                    deletable={false}
                    preview={false}
                >
                    <div
                        style={{
                            width: 60,
                            height: 60,
                            borderRadius: 50,
                            backgroundColor: '#f5f5f5',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            color: '#999999',
                            zIndex: 1000,
                            opacity: 0,
                        }}
                    >

                    </div>
                </ImageUploader>}>

                </Form.Item >
                <Form.Item name='nickName' label='昵称' rules={[{ required: true }]}>
                    <Input placeholder='请输入昵称' style={{ '--text-align': 'right' }} />
                </Form.Item>
                <Form.Item name='email' label='邮箱'>
                    <Input placeholder='请输入邮箱' style={{ '--text-align': 'right' }} />
                </Form.Item>
                <Form.Item name='idCard' label='身份证号'>
                    <Input placeholder='请输入身份证号' style={{ '--text-align': 'right' }} />
                </Form.Item>
                <Form.Item name='phonenumber' label='手机号'>
                    <Input placeholder='请输入手机号' style={{ '--text-align': 'right' }} />
                </Form.Item>
                <Form.Item name='sex' label='性别'>
                    <Radio.Group >
                        <Radio value='0' >男</Radio>
                        <Radio value='1'>女</Radio>
                    </Radio.Group>
                </Form.Item>

            </Form >
        </div>
    )
}
